<template>
  <div>
    <!-- <div class="system-user-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/">活动管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="success" circle icon="el-icon-plus"></el-button>
    </div>
    -->
    <el-tabs @tab-click="changeStatus" v-model="getPager.currentStatus">
      <el-tab-pane :label="v.name" v-for="(v) in getStatusPanel" :key="v.status" :name="v.status">
        <UserList :status="v.status" />
      </el-tab-pane>
    </el-tabs>
    <div class="pager">
      <el-pagination 
      background 
      layout="prev, pager, next"
      @current-change="changepage"
      :total="getPager.total"></el-pagination>
    </div>
  </div>
</template>

<script>
import UserList from "@/components/userlist";
//导入混合对象（可以包含组件中声明的各个参数项）
import systemUser from '@/mixins/systemUser.js';
export default {
  mixins:[systemUser],
  data() {
    return {};
  },
  computed:{},
  components: {
    UserList
  },
  created() {
    this.load(); //首次加载
  },
  methods: {
    changeStatus() {
      this.setPager({currentPage:1})
     if(this.getPager.currentStatus == this.getPager.prevStatus) return;
      this.load(); //加载数据
      // console.log(this.currentStatus , this.prevStatus);
    },
    changepage(page){
      this.setPager({currentPage:page});
      // console.log('页码发生变化',page);
      this.load();
    }
  }
};
</script>

<style lang="less" scoped>
.system-user {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  .system-user-header {
    position: relative;
    margin: 5px 0 14px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    .el-button {
      position: absolute;
      top: -11px;
      right: 20px;
    }
  }
  .pager{
    padding: 20px;
    text-align: center;
  }
}
</style>